<template>
	<b-layout-index :tabActive="1">
		<theme-color-bg type="c3">
			<navbar :isStyle="light" :back="false" :isAvatar="true" :isAvatarSlot="true" :title="$t('工作台')">
				<view slot="avatar" class="pd-left-10 mgpd">
					<u-cell :border="false">
						<view slot="title" class="pd-left-10 color-white font-size-12"><text> بۇ بولسا ئۇقتۇرۇش...
							</text></view>
						<view @click="navUrl" slot="icon">
							<iconfont icon="icon-erweima2" color="#fff" size="25" />
						</view>
					</u-cell>
				</view>
			</navbar>

			<view class="pd-bottom-60 mg-top-10  pd-10 ">
				<view class="heder color-white br-rd-10  ">
					<u-row>
						<u-col span="6">
							<view class="text-center">
								<view class="font-size-12">{{$t('余额')}}</view>
								<view><text class="price font-size-30 priceA">{{info.balance}}</text></view>
								<view class="font-size-10"><text>{{$t('七日内{0}次',[infoLog.weeks])}}</text></view>
								<view class="font-size-10"><text>{{$t('月内{0}次',[infoLog.manths])}}</text></view>
							</view>
						</u-col>
						<u-col span="6">
							<view class="text-center pd-5">
								<view class="font-size-12">{{$t('提现中')}}</view>
								<view><text class="price font-size-30 priceA">{{info.withdrawalWaits}}</text></view>
								<view class="font-size-10"><text>{{$t('七日内{0}次',[infoLog.week])}}</text></view>
								<view class="font-size-10"><text>{{$t('月内{0}次',[infoLog.manth])}}</text></view>
							</view>
						</u-col>
					</u-row>

				</view>
			</view>
		</theme-color-bg>

		<view class="coverfill  pd-10  br-rd-top-30">

			<b-panel-sys type="1"></b-panel-sys>

		</view>

<!-- 		<view class="coverfill  pd-10  mg-top-10">

			<echarts ref="chart2"></echarts>

		</view>

		<view class="coverfill  pd-10  mg-top-10">

			<echarts ref="chart1"></echarts>

		</view>
 -->



		<!-- <view class="pd-left-10 pd-right-10">
			<shop-order-card></shop-order-card>
		</view>
		<view class="pd-left-10 pd-right-10" v-for="(item,index) in datacard">
			<base-panel-title :isRadius="true" :fill="true" :title="item.title">
				<u-grid :col="4">
					<u-grid-item @click="navUrl(itema)" v-for="(itema,indexa) in item.items" :customStyle="{paddingBottom:20+'rpx'}">
						<view class="icon" :class="itema.bg">
							<iconfont color="#fff" :icon="itema.icon" :size="20"></iconfont>
						</view>

						<text class="font-size-12">{{itema.name}}</text>
					</u-grid-item>
				</u-grid>
			</base-panel-title>
		</view> -->
	</b-layout-index>
</template>

<script>
	import {
		findByInfo,
		findByInfoLog,
		myIncomeExpenses
	} from "@/api/userWallet.js";
	import {
		getMyStasticaOval
	}
	from "@/api/stastica.js";
	export default {

		data() {
			var userInfo = uni.getStorageSync('userInfo') || {
				avatarUrl: "",
				nickName: "",
				openId: ""
			};

			var authInfo = uni.getStorageSync("authInfo");
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [{
						name: 'star',
						title: '星星',
						count: 0
					},
					{
						name: 'hourglass',
						title: '沙漏',
						count: 0
					},
					{
						name: 'home',
						title: '首页',
						count: 0
					},
					{
						name: 'star',
						title: '音量',
						count: 0
					},
				],
				datacard: [{
					title: "我的团队",
					items: [{
						name: "我的授权",
						icon: "icon-icon-test27",
						color: "#fff",
						bg: "bg1",
						url: "/page/workbench/pages/agent/team/authorization"
					}, {
						name: "邀请代理",
						icon: "icon-renyuan",
						color: "#fff",
						bg: "bg2",
						url: "/page/usercenter/pages/invitation/index"
					}, {
						name: "团队管理",
						icon: "icon-icon-test21",
						color: "#fff",
						bg: "bg3",
						url: "/page/workbench/pages/agent/team/index"
					}, {
						name: "申请升级",
						icon: "icon-icon-test15",
						color: "#fff",
						bg: "bg5",
						url: "/page/workbench/pages/agent/upgrade"
					}]
				}, {
					title: "我的统计",
					items: [{
							name: "数据统计",
							icon: "icon-zhexiantu",
							color: "#fff",
							bg: "bg1"
						},
						/* 	{
								name: "将军统计",
								icon: "icon-qian",
								color: "#fff",
								bg: "bg2"
							}, {
								name: "结算统计",
								icon: "icon-shuju1",
								color: "#fff",
								bg: "bg3"
							}, */

						{
							name: "操作手册",
							icon: "icon-wendang",
							color: "#fff",
							bg: "bg4"
						}, {
							name: "积分商城",
							icon: "icon-gouwudai",
							color: "#fff",
							bg: "bg5"
						}, {
							name: "素材中心",
							icon: "icon-wenjian",
							color: "#fff",
							bg: "bg1"
						}, {
							name: "直播中心",
							icon: "icon-wenjian",
							color: "#fff",
							bg: "bg3"
						}, {
							name: "签到中心",
							icon: "icon-wenjian",
							color: "#fff",
							bg: "bg1"
						}, {
							name: "主动发货",
							icon: "icon-wenjian",
							color: "#fff",
							bg: "bg4"
						}, {
							name: "发货记录",
							icon: "icon-wenjian",
							color: "#fff",
							bg: "bg2"
						}
					]
				}],
				userInfo,
				authInfo,
				headerlist: [{
						name: "我要提货",
						icon: "icon-fuzhi",
						bg: "bg1"
					},
					{
						name: "邀请用户",
						icon: "icon-renyuan",
						url: "/page/usercenter/pages/invitation/index",
						bg: "bg2"
					},
					{
						name: "云仓管理",
						icon: "icon-yue",
						bg: "bg3"
					},
					{
						name: "素材中心",
						icon: "icon-shoucang",
						bg: "bg4"
					}
				],
				info: {
					balance: 0,
					withdrawal: 0,
					withdrawalWaits: 0
				},
				infoLog: {
					manth: 0,
					manths: 0,
					week: 0,
					weeks: 0,
				}

			}
		},


		onShow: function() {
			this.setTabBarIndex(1)

		},
		onLoad: function() {
			this.getInfo()
		},
		methods: {

			navUrl: function(item) {
				console.log(item)
				uni.navigateTo({
					url: item.url + "?name=" + item.name
				})

			},
			getInfo: function() {

				findByInfo().then(res => {
					this.info = res
					//	uni.setStorageSync("userWalletFindByInfo",res)
				})



				findByInfoLog().then(res => {
					this.infoLog = res
					//	uni.setStorageSync("userWalletFindByInfo",res)
					//	this.$refs.chart1.setOption("Helllllllllllllllllllllllllllllllllllllll")
				})

				myIncomeExpenses().then(res => {
					//this.infoLog = res
					//	uni.setStorageSync("userWalletFindByInfo",res)
					var a = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						xAxis: {
							type: 'category',
							data: res.category,
							axisLabel: {
								formatter: '{value} 月'
							},
							axisTick: {
								alignWithLabel: true
							}
						},
						yAxis: {
							type: 'value',
							boundaryGap: [0, 0.01]
						},
						legend: {},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						series: [{
							name: "چىقىم",
							data: res.export,
							type: 'bar',

						}, {
							name: "كىرىم",
							data: res.income,
							type: 'bar',

						}]
					}
					this.$refs.chart1.setOption(a)
				})

				getMyStasticaOval().then(res => {
					var a = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							type: 'scroll',
							orient: 'vertical',
							right: 10,
							top: "center",
							bottom: 20,
						},
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: ['30%', '50%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '40',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: res
						}]
					}
					this.$refs.chart2.setOption(a)
				})
			},
			navUrl: function() {
				var url = '/page/usercenter/pages/qrcode/index'
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.heder {
		padding: 10px;

	}

	.heder .label {
		font-size: 12px;
	}

	.pdup {
		margin-top: -60px
	}

	.icon {
		padding: 20rpx;
		margin-bottom: 10px;
		border-radius: 10px;


	}

	.bg1 {
		background-color: #4c77ee;
	}

	.bg2 {
		background-color: #097fc9;
	}

	.bg3 {
		background-color: #0ac9b8;
	}

	.bg4 {
		background-color: #f9ae3d;
	}

	.bg5 {
		background-color: #bf359d;
	}

	.bg6 {
		background-color: #0deea9;
	}

	.mgpd {
		margin-top: -5px;
	}

	.coverfill {
		background-color: #FFFFFF;
		margin-top: -20px;
		min-height: 200px;
	}

	.br-rd-top-30 {
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}
</style>
